<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="./assets/lib/layui/css/layui.css">
    <script src="./assets/lib/layui/layui.all.js"></script>
    <link rel="stylesheet" type="text/css" href="./css/index1.css" />
    <title>BLUEJ抽大奖了</title>
</head>

<body>
    <div class="web">
        <audio id="music" loop autoplay="autoplay" src="./mp3/Christmas.mp3"></audio>
        <div class="xuehua">
            <img src="./img/gift1.png" alt="" />
        </div>
        <div class="lind">
            <img src="./img/fruit1.png" alt="" />
        </div>
        <div class="lind2">
            <img src="./img/gift2.png" />
        </div>
        <div class="logo">
            <img src="./img/logo.png" alt="" />
        </div>
        <div class="shengd">
            <img src="./img/wenzi.png" alt="" />
        </div>
        <div class="socks">
            <img src="./img/wazi.png" alt="" />
        </div>
        <div class="portrait imgs">
            <div class="portrait1 leftImg">
                <img src="./img/men.png" alt="" />
            </div>
            <div class="portrait2 rightImg">
                <img src="./img/women.png" alt="" />
            </div>
        </div>
        <div class="gift">
            <div class="giftBox1">
                <img src="./img/bottomgift2.png" alt="" />
            </div>

            <div class="giftBox2">
                <img src="./img/bottomgift1.png" alt="" />
            </div>
        </div>
        <div class="man">
            <img src="./img/shengdanlaoren.png" alt="" />
        </div>
        <div class="title">
            <img src="./img/xiatubiao.png" alt="" />
        </div>
        <div class="btn start">
            <img src="./img/btn.png" alt="" />
        </div>
        <!-- 报名二维码 -->
        <style lang="">
            .qrCode{
                position:absolute;       
                right: 10px;
                bottom:130px;
                width: 150px;
                height: 150px;
            }
            .qrCode img{
                width: 100%;
                height: 100%;
            }
        </style>
        <div class="qrCode">
            <img src="./img/MerryChristmas/joinQR.png" alt="">
        </div>
        <style>
            .showAllUser {
                z-index: 100;
                width: 250px;
                height: 520px;
                /*background: red;*/
                position: absolute;
                bottom: 10px;
                left: 10px;
                overflow: hidden;
                font-size: 0;
            }

            .showAllUser .inner {
                width: 100%;
                height: 100%;
                overflow: auto;
                padding-right: 20px;
            }
            .img {
                margin-right: 3px;
                margin-top: 5px;
                display: inline-block;
                width: 50px;
                height: 50px;
                overflow: hidden;
                border-radius: 50%;
            }
            /* 抽过奖后边框去掉 */
            .img[hasgift="0"]{
                border:2px solid firebrick;
            }
            .img[hasgift="1"]{
                /* 动画时也设置了透明度,所有加了!important */
                opacity: .4 !important;
                border:2px solid transparent;
            }
            img {
                width: 100%;
            }
        </style>
        <!-- 所有用户小窗口 -->
        <div class="showAllUser">
            <div class="inner">

            </div>
        </div>
        <!-- 下拉框界面 -->
        <div class="tem">
            <p style="position: absolute; bottom:22%;width: 50%;line-height:1.5;left:42%;transform: translateX(-50%);color:gold;font-size: 18px;text-align: center;"></p>
            <img src="./img/timer.png" alt="" />
        </div>
    </div>
    <!-- <script src="./js/resLoader.js"></script> -->
    <script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
    <script src="./js/tweenMax.js"></script>
    <script src="./js/utils.js"></script>
    <script type="text/javascript">
        function showAlert(content) {
            $(".tem").siblings().css("opacity", .5);
            $(".tem").css("transform", "translate(-50%,-10%)");
            $(".tem p").text(content);
            setTimeout(function () {
                $(".tem").trigger("click");
            }, 3000)
        }
        $(".tem").on("click", function () {
            $(".tem").siblings().css("opacity", 1);
            $(".tem").css("transform", "translate(-50%,-200%)")
        })
        setTimeout(function () {
            $(".socks").addClass("wazi")
        }, 1000)
    </script>
    <script>
        //开始抽奖
        startGame()
        function startGame() {
            canClick = true;
            $(".start").on("click", function () {
                if (!canClick) return
                canClick = false;
                $(this).css("animationName", "none");

                //获取中奖信息
                myReq(urls.getTarget,{},"get",function(res){
                    console.log(res);
                    var allUser= res.data.allUser;
                    var targetUser = res.data.targetUser;
                    if (allUser.length == 0) {
                        showAlert("游戏结束");
                        canClick = true;
                        $(".start").css("animationName", "jello");
                        return;
                    }
                    var rightNum = targetUser.length - 1;
                    if (targetUser.length == 1) {
                        showAlert("就剩你一个人了，默默的找Bluej精灵交换礼物吧！");
                        canClick = true;
                        $(".start").css("animationName", "jello");
                        return;
                    }
                    target1 = targetUser[0];
                    target2 = targetUser[1] ? targetUser[1] : {nickname: "Bluej精灵!"};
                    changeImg("leftImg", allUser, targetUser[0], 0);
                    changeImg("rightImg", allUser, targetUser[rightNum], 0);
                })
            });
        }
        //动画
        //
        var pos = [{
                x: "-100%",
                "opacity": 0.3,
                ease: Back.easeInOut,
                onComplete() {
                    onCom()
                }
            },
            {
                x: "100%",
                "opacity": 0.3,
                ease: Back.easeInOut,
                onComplete() {
                    onCom()
                }
            },
            {
                y: "-100%",
                "opacity": 0.3,
                ease: Back.easeInOut,
                onComplete() {
                    onCom()
                }
            },
            {
                y: "100%",
                "opacity": 0.3,
                ease: Back.easeInOut,
                onComplete() {
                    onCom()
                }
            },
            {
                x: "100%",
                y: "100%",
                "opacity": 0.3,
                ease: Back.easeInOut,
                onComplete() {
                    onCom()
                }
            },
            {
                x: "-100%",
                y: "100%",
                "opacity": 0.3,
                ease: Back.easeInOut,
                onComplete() {
                    onCom()
                }
            },
            {
                x: "100%",
                y: "-100%",
                "opacity": 0.3,
                ease: Back.easeInOut,
                onComplete() {
                    onCom()
                }
            },
            {
                x: "-100%",
                y: "-100%",
                "opacity": 0.3,
                ease: Back.easeInOut,
                onComplete() {
                    onCom()
                }
            }
        ]
        var aniTime = 4500;
        var myAudio = new Audio();
        
        var music = document.getElementById("music");

        function changeImg(divName, allUser, target, i = 0) {
            music.volume = 0.3;
            i++;
            if (i < 6) {
                aniTime *= 0.95;
            } else if (i > 6) {
                aniTime *= 1.1;
            }
            aniTime = aniTime < 800 ? 800 : aniTime;
            aniTime = aniTime > 1000 ? 1000 : aniTime;
            //console.log("动画时间",aniTime);
            var myImg = $("." + divName).clone();
            //抽奖结果
            if (i > 12) {
                myAudio.src = "./mp3/last.mp3";
                myAudio.autoplay = true;
                myImg.find("img").attr("src", target.avatar);
                $(".imgs").append(myImg);
                TweenMax.from(myImg, aniTime / 1000 * 0.5, {
                    y: "-100%",
                    "opacity": .3,
                    ease: Back.easeInOut,
                    onComplete() {
                        onCom();
                    }
                });
                setTimeout(function () {
                    music.volume = 1;
                    showAlert(target1.nickname + "与" + target2.nickname + "交换礼物！")
                    canClick = true;
                    $(".start").css("animationName", "jello");
                    // 更改左侧头像状态
                    $(".inner").find("img[src='"+target1.avatar+"']").parent(".img").attr("hasgift",1);
                    $(".inner").find("img[src='"+target2.avatar+"']").parent(".img").attr("hasgift",1);
                }, 800)
                return;
            } else {
                myAudio.src = "./mp3/move.mp3";
                myAudio.autoplay = true;
                let showRan = Math.floor(Math.random() * allUser.length);
                let showImg = allUser[showRan].avatar;
                var ranPos = Math.floor(Math.random() * pos.length);
                myImg.find("img").attr("src", showImg);
                $(".imgs").append(myImg);
            }
            TweenMax.from(myImg, aniTime / 1000 * .5, pos[ranPos]);
            setTimeout(function () {
                changeImg(divName, allUser, target, i);
            }, aniTime)
        }
        function onCom() {
            $(".leftImg:not(:last)").remove();
            $(".rightImg:not(:last)").remove();
        }

        //轮询设置所有用户
        lunxun();
        function lunxun() {
            setTimeout(function () {
                myReq(urls.getAllUser, {}, "get", function (res) {
                    // console.log(res);
                    res.data.forEach(function (cur, index) {
                        let imgsArr = []
                        $(".inner").find("img").each(function(){
                            var curSrc = $(this).attr("src")
                            imgsArr.push(curSrc)
                        })
                        if(imgsArr.indexOf(cur.avatar)==-1){ // 原来没有的
                            var div = $('<div class="img"><img src="" alt=""></div>');
                            div.attr("hasgift",cur.hasgift);
                            div.find("img").attr("src", cur.avatar);
                            TweenMax.from(div, 1.5, {
                                scale: 1.2,
                                "opacity": 0.3,
                                ease: Back.easeInOut
                            });
                            $(".inner").prepend(div);
                        }else{
                            
                        }
                    })
                },function(){},function(){
                    lunxun()
                })
            }, 1000)
        }
        //解决mac音乐播放
        $(".man").on("click", function () {
            console.log($("#music")[0].paused);
            if ($("#music")[0].paused) {
                $("#music")[0].play();
            } else {
                $("#music")[0].pause();
            }
        })
    </script>
</body>

</html>



 
